import React, { Component } from "react";
import PropTypes from "prop-types";

class TodoMain extends Component {
  // 类型进行限制
  static propTypes = {
    todoList: PropTypes.array.isRequired, // 类型是一个数组且不允许为undefined
    changeIsCheckedById:PropTypes.func.isRequired, // 类型是函数，且不允许是undefined
    delTodoById:PropTypes.func.isRequired // 类型是函数，且不允许是undefined
  };

  state = {
    // 设置鼠标进入每行li中的id
    id:-1  
  }
  render() {
    return (
      <ul className="todo-main">
        {
            this.props.todoList.map(item => (
              <li
                key={item.id}
                // 移入
                onMouseEnter={() => this.setState({ id: item.id })}
                //移出
                onMouseLeave={() => this.setState({ id:-1})}
              >
                <label>
                  <input
                    type="checkbox"
                    checked={item.isChecked}
                    onChange={() => this.props.changeIsCheckedById(item.id)} />
                  <span>{item.title}</span>
                </label>
                <button
                  onClick={()=>this.props.delTodoById(item.id)}
                  className="btn btn-danger"
                  style={{ display:this.state.id===item.id?"block":"none" }}>
                  删除
                </button>
              </li>
          ))
        }
      </ul>
    );
  }
}

export default TodoMain;
